import React, { useEffect, useState } from "react";
import ImgUpload from "../components/ImgUpload";
import {userUpdate} from '../api/user'
import {useSelector,useDispatch} from 'react-redux'
import {loginSuccess} from '../store/features/user'
import {
  Form,
  Input,
  Button,
  Cascader,
  DatePicker,
  InputNumber,
  Switch,
  Upload,
} from "antd";
const { RangePicker } = DatePicker;
const { TextArea } = Input;

const Setting = () => {
  const { userInfo } = useSelector(({ user }) => user);
  const dispatch = useDispatch()
  const handleFinish = (values)=>{
    console.log(values);
    let {objectId,sessionToken} = userInfo
    userUpdate(objectId,values).then(res=>{
      dispatch(loginSuccess({
        ...userInfo,
        ...values
      }))
    })
  }
  return (
    <>
      <Form
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 18,
        }}
        layout="horizontal"
        onFinish={handleFinish}
        initialValues={userInfo}
      >
        <Form.Item
          label="用户账号"
          name="username"
          rules={[{ required: true }]}
        >
          <Input readOnly/>
        </Form.Item>
        <Form.Item
          label="用户头像"
          name="avatar"
          valuePropName="fileList"
        >
          <ImgUpload />
        </Form.Item>
        <Form.Item
          label="昵称"
          name="nickname"
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="电话"
          name="tel"
        >
          <Input />
        </Form.Item>
        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            确认
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default Setting;
